<div class="tab-wrap" id="accountWrap">
    <#if isUnlocked == false>
        <div class="lock-tips">
            <div class="title">
                Below is a sample report. This feature only available to <em>PRO</em> version or higher.
                <br>
                Please use credit to unlock the report or upgrade your membership.
            </div>
            <div class="right">
                <button class="gd-btn btn-default">Unlock</button>
                <button class="gd-btn btn-info">Upgrade</button>
            </div>
        </div>
        <#if isMobile == false>
            <img class="demo-img" src="${request.contextPath}/static/img/ins/Brand-Product.png" alt="sample report">
        <#else>
            <img class="demo-img" src="${request.contextPath}/static/img/ins/Brand-Product-Mobile.png"
                 srcset="${request.contextPath}/static/img/ins/Brand-Product-Mobile@2x.png 2x" alt="sample report">
        </#if>
    <#else>
        <ul class="date-tab">
            <li class="date-tab-item" value="0">7 Days</li>
            <li class="date-tab-item" value="1">15 Days</li>
            <li class="date-tab-item is-active" value="2">30 Days</li>
        </ul>
        <div class="wrap-item">
            <div class="wrap-item__title">
                Account Overview
                <div class="gd-popover"
                     content="<dl class='modal-tip'>
                    <dt>1. Followers</dt>
                    <dd>The total number of Instagram followers the brand official accounts have.</dd>
                    <dt>2. Post</dt>
                    <dd>The total number of media the brand official accounts posted in the selected period.</dd>
                    <dt>3. Views</dt>
                    <dd>The number of views on the videos posted by the brand official accounts in the selected period.</dd>
                    <dt>4. Likes</dt>
                    <dd>The number of likes on the media posted by the brand official accounts in the selected period.</dd>
                    <dt>5. Reviews</dt>
                    <dd>The number of reviews on the media posted by the brand official accounts in the selected period.</dd>
                    <dt>5. Engagements</dt>
                    <dd>The number of likes and reviews on the media posted by the brand official accounts in the selected period.</dd>
                </dl>">
                    <i class="iconfont iconfaq"></i>
                </div>
            </div>
            <div class="wrap-item__inner">
                <div class="grid-data-list row-6 m-row-2" id="accountBaseInfo">
                    <div class="grid-data-item">
                        <div class="title">Followers</div>
                        <div class="sub-title">-</div>
                    </div>
                    <div class="grid-data-item">
                        <div class="title">Post</div>
                        <div class="sub-title">-</div>
                    </div>
                    <div class="grid-data-item">
                        <div class="title">Views</div>
                        <div class="sub-title">-</div>
                    </div>
                    <div class="grid-data-item">
                        <div class="title">Likes</div>
                        <div class="sub-title">-</div>
                    </div>
                    <div class="grid-data-item">
                        <div class="title">Reviews</div>
                        <div class="sub-title">-</div>
                    </div>
                    <div class="grid-data-item">
                        <div class="title">Engagements</div>
                        <div class="sub-title">-</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="wrap-item row-2">
            <div class="wrap-item">
                <div class="wrap-item__title">Audience Size Breakdown</div>
                <div class="wrap-item__inner">
                    <div class="trend-wrap" id="audienceTrend"></div>
                </div>
            </div>
            <div class="wrap-item">
                <div class="wrap-item__title">Industry Breakdown</div>
                <div class="wrap-item__inner">
                    <div class="trend-wrap" id="industryTrend"></div>
                </div>
            </div>
        </div>
        <div class="wrap-item">
            <div class="wrap-item__title">
                Brand Official Accounts
                <div class="gd-popover"
                     content="<dl class='modal-tip'>
                    <dt>1. Post</dt>
                    <dd>The number of media the account posted in the selected period.</dd>
                    <dt>2. Engagements</dt>
                    <dd>The number of likes and reviews on media posted by the account in the selected period.</dd>
                </dl>">
                    <i class="iconfont iconfaq"></i>
                </div>
            </div>
            <div class="wrap-item__inner">
                <div class="grid-list" id="accountList">
                    <div class="grid-list__inner row-4"></div>
                    <div class="grid-list__footer">
                        <span>View More</span>
                    </div>
                </div>
            </div>
        </div>
    </#if>
</div>
<script type="module">
    import { getGridList, troggleActive } from "/static/js/common.js"

    const accountWrap = document.getElementById('accountWrap')
    let dayType = 2
    const accountParam = {
        brandId:'${brand.id?c}',
        dayType,
        page: 1,
        pageSize: 8,
    }

    <#if isUnlocked == true>
    initAccount()
    initEvent()
    </#if>

    function initAccount() {
        getAccountStatis()
        getAudienceTrend()
        getIndustryTrend()
        getAccount()
    }
    function initEvent() {
        // 时间tab选择事件
        accountWrap.querySelectorAll('.date-tab li').forEach(item => {
            item.addEventListener('click', () => {
                troggleActive(item, () => {
                    dayType = +item.getAttribute('value')
                    accountParam.page = 1
                    
                    getAccountStatis()
                    getAccount()
                })
            })
        })

        accountWrap.querySelector('.grid-list__footer span').addEventListener('click', () => {
            accountParam.page ++
            getAccount()
        })
    }

    function getAccountStatis() {
        const wrap = document.getElementById('accountBaseInfo')
        wrap.showLoading()
        const url = getEncodeUrl('/ins/brand/account/overview', {
            brandId:'${brand.id?c}',
            dayType
        })
        _axios.get(url).then(res => {
            if(res.Code === 200) {
                const statis = wrap.querySelectorAll('.sub-title')
                if(res.Data) {
                    statis[1].innerText = getNumber(+res.Data.total)
                    statis[2].innerText = getNumber(+res.Data.viewCount)
                    statis[3].innerText = getNumber(+res.Data.likeCount)
                    statis[4].innerText = getNumber(+res.Data.commentCount)
                    statis[5].innerText = getNumber(+res.Data.ec)
                }
            }
            wrap.hideLoading()
        })
    }
    function getAudienceTrend() {
        const wrap = document.getElementById('audienceTrend')
        wrap.showLoading()
        const url = getEncodeUrl('/ins/brand/account/followerSize', {
            brandId:'${brand.id?c}'
        })
        _axios.get(url).then(res => {
            if(res.Code === 200) {
                const data = res.Data

                const statis = accountWrap.querySelectorAll('#accountBaseInfo .sub-title')
                statis[0].innerText = numFormat(+data.followerCount)

                if(data && data.insBrandAccountFollowerSizes.length > 0) {
                    const insBrandAccountFollowerSizes = data.insBrandAccountFollowerSizes
                    const chart = echarts.init(wrap)
                    const option = {
                        color: ['#1890FF'],
                        tooltip: {
                            <#if isMobile == true>
                            position: ['50%', 30],
                            </#if>
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            }
                        },
                        grid: {
                            <#if isMobile == true>
                            top: 30,
                            left: 60,
                            bottom: 25,
                            right: 20,
                            <#else>
                            top: 20,
                            left: 60,
                            bottom: 30,
                            right: 20,
                            </#if>
                        },
                        xAxis: {
                            type: 'category',
                            data: insBrandAccountFollowerSizes.map(item => item.sizeName),
                            axisTick:{
                                show:false,//不显示坐标轴刻度线
                            },
                            axisLine: {
                                lineStyle: {
                                    color: 'rgba(0,0,0,.45)'
                                }
                            },
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: val => {
                                    return numFormat(val)
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: 'rgba(0,0,0,.45)',
                                    type: 'dashed' // 坐标轴虚线
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
                                },
                            }
                        },
                        series: [
                            {
                                type: 'bar',
                                <#if isMobile == false>
                                barWidth: 40,
                                <#else>
                                barWidth: 24,
                                </#if>
                                data: insBrandAccountFollowerSizes.map(item => item.followerCount),
                            }
                        ]
                    }
                    chart.setOption(option)
                } else {
                    showNoDataImg(wrap, {
                        isECharts: true
                    })
                }
            }
            wrap.hideLoading()
        })
    }
    function getIndustryTrend() {
        const wrap = document.getElementById('industryTrend')
        wrap.showLoading()
        const url = getEncodeUrl('/ins/brand/account/industry', {
            brandId:'${brand.id?c}'
        })
        _axios.get(url).then(res => {
            if(res.Code === 200) {
                const data = res.Data
                if(data && data.length > 0) {
                    const chart = echarts.init(wrap)
                    let option = {
                        color: ['#3AA0FF', '#62B2FE', '#89C5FF', '#B1D9FF', '#D8ECFF','#D3E9FF'],
                        tooltip: {
                            trigger: 'item',
                            formatter(params) {
                                return params.name + ': ' + numFormat(+params.value) + '%'
                            }
                        },
                        series: [
                            {
                                name: 'age',
                                type: 'pie',
                                <#if isMobile == false>
                                radius: ['50%', '70%'],
                                <#else>
                                radius: ['30%', '50%'],
                                </#if>
                                label: {
                                    fontSize: 14,
                                    color: '#545454'
                                },
                                data: data.map(item => {
                                    return {
                                        value: item.val,
                                        name: item.category
                                    }
                                }),
                                itemStyle: {
                                    normal: {
                                        opacity: 0.7,
                                        borderWidth: 1,
                                        borderColor: '#FFF'
                                    }
                                }
                            }
                        ]
                    }
                    chart.setOption(option)
                } else {
                    showNoDataImg(wrap, {
                        isECharts: true
                    })
                }
            }
            wrap.hideLoading()
        })
    }
    function getAccount() {
        accountParam.dayType = dayType
        const wrap = document.getElementById('accountList')
        const inner = wrap.querySelector('.grid-list__inner')
        getGridList({
            loadingElement: wrap,
            url: '/ins/brand/account/list',
            params: accountParam,
            listWrap: inner,
            footerElement: wrap.querySelector('.grid-list__footer'),
            listDomFunc: item => {
                let str = ''
                str += '<a href="/instagram/influencer/' + item.username + '">' +
                        '<div class="grid-item">' +
                        '<div class="blogger-item">' +
                        '<div class="blogger-cover">' +
                            '<img class="cover" src="' + getImage(item.picUrl, IMAGE_TYPE.BLOGGER, IMAGE_SIZE.MIDDLE) + '" alt="product image">' +
                            '<img class="auth" src="/static/img/ins/Authentication.png" srcset="/static/img/ins/Authentication@2x.png 2x">' +
                        '</div>' +
                        '<div class="brand-info">'
                str +=      '<div class="title">' + item.username
                if(item.category && gugeeGobal.isMobile) {
                    str +=      '<div class="category">' + item.category + '</div>'
                }
                str +=      '</div>' +
                            '<div class="sub-title">Followers ' + numFormat(item.followerCount) + '</div>' +
                        '</div>'
                if(item.category && !gugeeGobal.isMobile) {
                    str += '<div class="category">' + item.category + '</div>'
                }
                str +=  '</div>' +
                        '<div class="data-list">' +
                        '<div class="data-item">' +
                        '<div class="title">Post</div>' +
                        '<div class="sub-title">' + numFormat(item.post) + '</div>' +
                        '</div>' +
                        '<div class="data-item">' +
                        '<div class="title">Engagements</div>' +
                        '<div class="sub-title">' + numFormat(item.ec) + '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</a>'
                return str
            },
            otherEvent: () => {
            }
        })
    }
</script>